The Effect

近設計

Walkthrough

This came out of a 24-hour work sprint to replicate some sophisticated video VFX in to make it more flexible. You can see the original here

There's a lot of pieces that go into an effect like this. What follows is an outline of the animations and VFX concepts, all in pure css :)

Core principles:

  1. Keep the text legible most of the time
  2. Don't throw too many glitches in per second. Give it space to breathe
  3. Whitespace never hurt anyone
  4. Blurs & glows lend a feeling of realism in dark environments (queue neon)

layers

Create muultiple layers to play with. For this example I'll use ::before & ::after elements, but this could just as easily be multiple divs overlapped, or whatever.

EXAMPLE

Paths

Build out a set of clip-paths (Eg. I wrote up a generator util for this project)

Example Path:

Over text:

EXAMPLE

Movement

Create a stepping movement animation, so that the layers above can appear in different places as the other layers of the animation happen.

It's best to make this timing somewhat erratic.

Opacity

Create a similar animation for opacity, so that the layers can appear/disappear. This will get layered with the movement to create the appearance of the layers popping in and out in different places

There's an art to getting this transition to work without making the user feel motion sickness. Take some time getting it right

Font

The next layer is changes to the font directly. These could be any properties, but we'll stick to font-weight and color.

EXAMPLE

Combined Animation Layers

Note that some of tthe animations have sync'd timing, and some don't.

I try to sync the paths & opacity animations, so that it looks like the background layers are really a part of the main text that's glitching off.

Then I try to separately sync the color/text/filter other effects, and keep the moevment separate completely. This gives the whole thing the appearance of a lot more effects than are actually happening, because of the different combinations.

EXAMPLE

Environment

For good measure, it should live in the right language & context :)

近設計